<script id="form_copyTemp" type="text/x-kendo-template">
    <div class="card">
        <div class="card-body">
            <div id="toolbar"></div>
            <form class="mb-4" id="formCopy"></form>
            <p class="d-flex justify-content-center">
                <button class="k-button k-button-lg k-state-selected mx-3" id="submitBtn" type="button">提 交</button>
                <button class="k-button k-button-lg mx-3" type="reset" onclick="clearForm();">清 空</button>
            </p>
        </div>
    </div>
    <script id="editTemplate" type="text/x-kendo-template">
        # if (data.length > 0) { #
            # for (var i = 0; i < data.length; i++) { #
                <div class="form-row border-bottom pt-2">
                    <div class="form-group col-xl-1">
                        <label class="d-none d-xl-block">&nbsp;</label>
                        <div class="d-flex pt-2 pt-xl-0">
                            <a class="k-button k-button-icon k-del-button mx-xl-2" href="javascript:;" onclick="delItem(this);"><span class="k-icon k-i-minus"></span></a>
                            <label class="k-checkbox-label"><input class="k-checkbox ids" id="id#= (i + 1) #" type="checkbox" value="#= data[i].id #"></label>
                            <span class="k-badge k-badge-primary k-badge-pill ml-auto px-2">#= kendo.toString((i + 1), '00') #</span>
                        </div>
                    </div>
                    <div class="form-group col-sm-6 col-md-4 col-xl-2">
                        <label class="d-block"><strong class="k-required">*</strong>姓名：</label>
                        <input class="k-textbox w-100" id="realName#= (i + 1) #" name="realName#= (i + 1) #" type="text" placeholder="文本框" required data-required-msg="请输入姓名！" pattern="[\\\u4E00-\\\u9FA5]{1,10}" data-pattern-msg="请输入1-10个汉字！" value="#= data[i].realName #">
                    </div>
                    <div class="form-group col-sm-6 col-md-4 col-xl-1">
                        <label class="d-block"><strong class="k-required">*</strong>年龄：</label>
                        <input class="w-100" id="age#= (i + 1) #" name="age#= (i + 1) #" type="number" placeholder="数字框" required data-required-msg="请输入年龄！" value="#= data[i].age #">
                        <span class="k-invalid-msg" data-for="age#= (i + 1) #"></span>
                    </div>
                    <div class="form-group col-sm-6 col-md-4 col-xl-2">
                        <label class="d-block"><strong class="k-required">*</strong>血型：</label>
                        <select class="w-100" id="bloodType#= (i + 1) #" name="bloodType#= (i + 1) #" required data-required-msg="请选择血型！">
                            <option value="">单选下拉框</option>
                            <option value="1"# if (data[i].bloodType === '1') { # selected# } #>A 型</option>
                            <option value="2"# if (data[i].bloodType === '2') { # selected# } #>B 型</option>
                            <option value="3"# if (data[i].bloodType === '3') { # selected# } #>O 型</option>
                            <option value="4"# if (data[i].bloodType === '4') { # selected# } #>AB 型</option>
                            <option value="5"# if (data[i].bloodType === '5') { # selected# } #>其他</option>
                        </select>
                        <span class="k-invalid-msg" data-for="bloodType#= (i + 1) #"></span>
                    </div>
                    <div class="form-group col-sm-6 col-md-4 col-xl-2">
                        <label class="d-block"><strong class="k-required">*</strong>生日：</label>
                        <input class="w-100" id="birthday#= (i + 1) #" name="birthday#= (i + 1) #" type="date" placeholder="日期框" required data-required-msg="请输入生日！" value="#= data[i].birthday #">
                        <span class="k-invalid-msg" data-for="birthday#= (i + 1) #"></span>
                    </div>
                    <div class="form-group col-sm-6 col-md-4 col-xl-1">
                        <label class="d-block"><strong class="k-required">*</strong>生肖：</label>
                        <input class="w-100" id="zodiac#= (i + 1) #" name="zodiac#= (i + 1) #" type="text" placeholder="表格下拉框" required data-required-msg="请选择生肖！" value="#= data[i].zodiac.zodiac #">
                        <span class="k-invalid-msg" data-for="zodiac#= (i + 1) #"></span><span class="k-invalid-msg" data-for="zodiac#= (i + 1) #_input"></span>
                    </div>
                    <div class="form-group col-sm-6 col-md-4 col-xl-3">
                        <label class="d-block"><strong class="k-required">*</strong>相配的星座：</label>
                        <select class="w-100" id="constellation#= (i + 1) #" name="constellation#= (i + 1) #" multiple required data-required-msg="请选择相配的星座！">
                            <option value="1"# for (var k = 0; k < data[i].constellation.length; k++) { ## if (data[i].constellation[k] === '1') { # selected# } ## } #>白羊座</option>
                            <option value="2"# for (var k = 0; k < data[i].constellation.length; k++) { ## if (data[i].constellation[k] === '2') { # selected# } ## } #>金牛座</option>
                            <option value="3"# for (var k = 0; k < data[i].constellation.length; k++) { ## if (data[i].constellation[k] === '3') { # selected# } ## } #>双子座</option>
                            <option value="4"# for (var k = 0; k < data[i].constellation.length; k++) { ## if (data[i].constellation[k] === '4') { # selected# } ## } #>巨蟹座</option>
                            <option value="5"# for (var k = 0; k < data[i].constellation.length; k++) { ## if (data[i].constellation[k] === '5') { # selected# } ## } #>狮子座</option>
                            <option value="6"# for (var k = 0; k < data[i].constellation.length; k++) { ## if (data[i].constellation[k] === '6') { # selected# } ## } #>处女座</option>
                            <option value="7"# for (var k = 0; k < data[i].constellation.length; k++) { ## if (data[i].constellation[k] === '7') { # selected# } ## } #>天秤座</option>
                            <option value="8"# for (var k = 0; k < data[i].constellation.length; k++) { ## if (data[i].constellation[k] === '8') { # selected# } ## } #>天蝎座</option>
                            <option value="9"# for (var k = 0; k < data[i].constellation.length; k++) { ## if (data[i].constellation[k] === '9') { # selected# } ## } #>射手座</option>
                            <option value="10"# for (var k = 0; k < data[i].constellation.length; k++) { ## if (data[i].constellation[k] === '10') { # selected# } ## } #>山羊座</option>
                            <option value="11"# for (var k = 0; k < data[i].constellation.length; k++) { ## if (data[i].constellation[k] === '11') { # selected# } ## } #>水瓶座</option>
                            <option value="12"# for (var k = 0; k < data[i].constellation.length; k++) { ## if (data[i].constellation[k] === '12') { # selected# } ## } #>双鱼座</option>
                        </select>
                        <span class="k-invalid-msg" data-for="constellation#= (i + 1) #"></span>
                    </div>
                </div>
            # } #
        # } #
    </script>
    <style scoped>
        .k-del-button {
            margin: 0 8px 0 9px !important;
        }
    </style>
</script>